<template>
  <div class="thenew" >
    <div class="top">
      <div class="imgdiv">
        <!--        <img src="../../assets/khImg/back.png" @click="tuichuBtn" alt="返回">-->
      </div>
      <div class="title">{{formdata.programmeName}}</div>
      <div class="divBtn">
        <el-button  @click="tuichuBtn">返回</el-button>
      </div>
    </div>
    <div class="zhong">
        <div>
          {{formdata.explainText}}
        </div>
    </div>
    <div class="boottop">
      <div class="lest">
        <span class="lestname"> <img src="../../assets/khImg/qiyename.png" alt=""><b>企业名称：{{formdata.deptName}}</b> </span>
        <span class="rightname"> <img src="../../assets/khImg/time.png" alt=""><b>评议时间：{{formdata.time}}</b> </span>
      </div>
      <div class="right">
        <el-button class="baocun"  size="small"  @click="baocun">保存</el-button>
        <el-button class="tijiao"  size="small"  @click="tijiao">提交</el-button>
      </div>
    </div>
    <div class="tableBody">
      <table border="1" rules="all" class="tablestyle">
        <thead>
        <tr class="firstHead">
          <th colspan="6" class="beicename">被测评干部的基本情况</th>

          <th  rowspan="2" v-for="item in formdata.assessHead">{{item.indexName}}</th>
        </tr>
        <tr class="twoHead" style="color: #0186d1;">
          <th>姓名</th>
          <th>性别</th>
          <th>出生年月</th>
          <th>原任职务</th>
          <th>现任职务</th>
          <th>任职时间</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in formdata.assessItems">
          <td>{{item.assessItemName}}</td>
          <td>{{item.sex}}</td>
          <td>{{item.birthDate}}</td>
          <td>{{item.originalPosition}}</td>
          <td>{{item.presentPosition}}</td>
          <td>{{item.positionTime}}</td>

          <td v-for="row in item.assessRules" >
            <el-radio v-model="row.value" v-for="xzrow in row.options"  :label="xzrow.optionValue" @change="jianting(item)">{{xzrow.optionName}}</el-radio>
          </td>

        </tr>
        </tbody>

      </table>

    </div>
  </div>
</template>

<script>
  import request from '@/utils/request'
  export default {
    name: "home",
    data() {
      return {
        //总数居
        formdata:{
          programmeName:'',
          explainText:'',
          deptName:'',
          time:'',
          assessHead:[],//表头数据
          assessItems:[],//数据
        },

        xiaoArr:[
          {topnamr:'对任用干部的看法',},
          {topnamr:'是否存在拉票炮管',},
          {topnamr:'测试表头',},
        ],
        //大表头
        firstHead:[
          {
            xingming:'张三',
            nameArr:[
              {
                value:'',
                xzarr:[
                  {name:'满意',label:'1',type:'1'},
                  {name:'基本满意',label:'2',type:'1'},
                  {name:'不满意',label:'3',type:'1'},
                ],
              },
              {
                value:'',
                xzarr:[
                  {name:'存在',label:'1',type:'2'},
                  {name:'不存在',label:'2',type:'2'},
                  {name:'不了解',label:'3',type:'2'},
                  {name:'是啥',label:'4',type:'2'},
                ],
              },
              {
                value:'',
                xzarr:[
                  {name:'满意',label:'1',type:'1'},
                  {name:'基本满意',label:'2',type:'1'},
                  {name:'不满意',label:'3',type:'1'},
                ],
              },
            ]
          },
          {

            xingming:'李四',
            nameArr:[
              {
                value:'',
                xzarr:[
                  {name:'满意',label:'1',type:'1'},
                  {name:'基本满意',label:'2',type:'1'},
                  {name:'不满意',label:'3',type:'1'},
                ],
              },
              {
                value:'',
                xzarr:[
                  {name:'存在',label:'1',type:'2'},
                  {name:'不存在',label:'2',type:'2'},
                  {name:'不了解',label:'3',type:'2'},
                  {name:'是啥',label:'4',type:'2'},
                ],
              },
              {
                value:'',
                xzarr:[
                  {name:'满意',label:'1',type:'1'},
                  {name:'基本满意',label:'2',type:'1'},
                  {name:'不满意',label:'3',type:'1'},
                ],
              },
            ]
          },
        ],


      };
    },

    created() {
      this.getList()

    },
    methods: {
      //提交
      tijiao:function(){
        console.log(this.formdata)
        this.formdata.locked = true
        request({
          url: '/kh/fe/programme3',
          method: 'post',
          data:this.formdata
        }).then(response => {
          this.$message({
            type: 'success',
            message: '提交成功'
          });
          this.getList()
        });
      },
      //提交
      baocun:function(){
        console.log(this.formdata)
        request({
          url: '/kh/fe/programme3',
          method: 'post',
          data:this.formdata
        }).then(response => {
          this.$message({
            type: 'success',
            message: '保存成功'
          });
          this.getList()
        });
      },
      jianting:function(row){
        console.log('勾选',row)
      },
      //打分按钮点击
      biaoBtn:function(rowx,row,dianxb,liexb) {
        console.log('dianxb',dianxb)
        console.log('liexb',liexb)
      },
      getTime:function(){
        var date = new Date();
        var nian=date.getFullYear(); //获取完整的年份(4位)
        var yue =date.getMonth()+1; //获取当前月份(0-11,0代表1月)
        var ri = date.getDate(); //获取当前日(1-31)
        if(yue<9){
          yue = "0"+yue
        }
        if(ri<9){
          ri = "0"+ri
        }
        this.formdata.time = nian+'年'+yue+'月'+ri+'日'
      },
      //获取列表数据
      getList:function() {
        request({
          url: '/kh/fe/programme/'+this.$route.query.data,
          method: 'get',
        }).then(response => {
          this.formdata = response.data
          this.getTime()
          // this.formdata.explainText = response.data.explainText
          // this.formdata.qiyename = response.data.assessItems[0][0].assessItemName

        });
      },

      //返回
      tuichuBtn:function(){
        this.$router.push('/homePage');
      },

    }
  };
</script>

<style  lang="scss" >
  body{
    background-color: #FFFFFF;
  }

  .thenew{
    margin: 0;
    padding: 0;
    .el-radio {
      width: 85px;
      margin-right: 10px;
      /*background-color: #1ab394;*/
      display: inline-block;
    }
    .el-radio__input {
      float: left;
    }

    /*position: absolute;*/
    .top {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 100px;
      background-color: #1085ca;
      .imgdiv {
        margin-left: 60px;
        img {
          width: 48px;
          height: 48px;
        }
      }
      .title {
        height: 30px;
        font-family: MicrosoftYaHei;
        font-size: 30px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 20px;
        letter-spacing: 0px;
        color: #ffffff;
      }
      .divBtn {
        margin-right: 60px;
        .el-button {
          width: 121px;
          height: 40px;
          background-color: #f6f6f6;
          border-radius: 6px;
          font-family: MicrosoftYaHei;
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 20px;
          letter-spacing: 0px;
          color: #0186d1;
        }
      }
    }
    .zhong {
      width: 1920px;
      height: 161px;
      background-color: #f2f2f2;
      div {
        padding-top: 123px;
        font-family: MicrosoftYaHei;
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 20px;
        letter-spacing: 0px;
        color: #fc122d;
        margin-left: 113px;
      }
    }
    .boottop {
      height: 93px;
      width: 1700px;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .lest {
        .lestname {
          img {
            width: 24px;
            height: 25px;
            margin-right: 13px;
            vertical-align:middle;
            margin-top: -11px;
          }
          font-family: MicrosoftYaHei-Bold;
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 20px;
          letter-spacing: 0px;
          color: #000000;
        }
        .rightname {
          vertical-align: text-bottom;
          margin-left: 108px;
          img {
            width: 25px;
            height: 25px;
            margin-right: 13px;
            vertical-align:middle;
            margin-top: -10px;
          }
          font-family: MicrosoftYaHei-Bold;
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 20px;
          letter-spacing: 0px;
          color: #000000;
        }
      }
      .right {
        .baocun {
          width: 63px;
          height: 40px;
          background-color: #00c882;
          border-radius: 8px;
          font-family: MicrosoftYaHei;
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 19px;
          letter-spacing: 0px;
          color: #ffffff;
          margin-right: 20px;
        }
        .tijiao {
          width: 63px;
          height: 40px;
          background-color: #0186d1;
          border-radius: 8px;
          font-family: MicrosoftYaHei;
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 19px;
          letter-spacing: 0px;
          color: #ffffff;
        }
      }

    }
    .titlename {
      width: 100%;
      display: flex;
      justify-content: center;
    }
    .divname {
      width: 1700px;
      height: 36px;
      /*background: #cccccc;*/
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .table {
      width: 800px;
      td{
        height: 36px;
      }
      tr{
        width: 100%;
      }
    }
    .biaoti {
      padding-left: 10px;
    }
    .tdxuanxiang {
      /*width: 12.5%;*/
      text-align: center;
    }
    .tableBody {
      display: flex;
      justify-content: center;
    }
    .tablestyle {
      border: 1px solid #cccccc;
      color: #606266;
      font-size: inherit;
      width: 1700px;
      th{
        height: 50px;
      }

    }
    .tablestyle td {
      height: 50px;
      text-align: center;
    }
    .beicename {
      height: 50px;
      /*background-color: red;*/
    }
  }
  @media screen and (max-width:800px){
    body{
      background-color: #FFFFFF;
    }

    .thenew{
      margin: 0;
      padding: 0;
      .el-radio {
        width: 85px;
        margin-right: 10px;
        /*background-color: #1ab394;*/
        display: inline-block;
      }
      .el-radio__input {
        float: left;
      }
      .top {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 5em;
        background-color: #1085ca;
        .imgdiv {
          margin-left: 60px;
          img {
            width: 48px;
            height: 48px;
          }
        }
        .title {
          overflow: hidden;
          height: 100%;
          font-family: MicrosoftYaHei;
          font-size: 1.3em;
          font-weight: normal;
          font-stretch: normal;
          line-height: 4em;
          letter-spacing: 0px;
          color: #ffffff;
        }
        .divBtn {
          margin-right: 60px;
          .el-button {
            width: 6em;
            height: 2.2em;
            background-color: #f6f6f6;
            border-radius: 6px;
            font-family: MicrosoftYaHei;
            font-size: 1em;
            font-weight: normal;
            font-stretch: normal;
            line-height: 1em;
            letter-spacing: 0px;
            color: #0186d1;
          }
        }
      }
      .zhong {
        width:100%;
        height: 9em;
        background-color: #f2f2f2;
        div {
          padding-top: 7em;
          font-family: MicrosoftYaHei;
          font-size: 13px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 20px;
          letter-spacing: 0px;
          color: #fc122d;
          margin-left: 2em;
        }
      }
      .boottop {
        height: 5em;
        width: 100%;
        margin-left: 0.5em;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        .lest {
          width: 68%;
          .lestname {
            padding-left: 1em;
            img {
              width: 15px;
              height: 15px;
              margin-right: 0.5em;
              vertical-align: middle;
              margin-top: -5px;
            }
            font-family: MicrosoftYaHei-Bold;
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 20px;
            letter-spacing: 0px;
            color: #000000;
          }
          .rightname {
            vertical-align: text-bottom;
            margin-left: 1em;
            font-family: MicrosoftYaHei-Bold;
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 20px;
            letter-spacing: 0px;
            color: #000000;
            display: block;
            margin-top: 0.3em;
            img {
              width: 15px;
              height: 15px;
              margin-right: 0.5em;
              vertical-align:middle;
              margin-top: -5px;
            }
          }
        }
        .right {
          width: 30%;
          .baocun {
            width: 4em;
            height: 2em;
            background-color: #00c882;
            border-radius: 8px;
            font-family: MicrosoftYaHei;
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 0em;
            letter-spacing: 0px;
            color: #ffffff;
            margin-right: 2em;
            margin-left: 0.7em;
          }
          .tijiao {
            width: 4em;
            height: 2em;
            background-color: #0186d1;
            border-radius: 8px;
            font-family: MicrosoftYaHei;
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 0em;
            letter-spacing: 0px;
            color: #ffffff;
          }
        }
      }
      .titlename {
        width: 100%;
        display: flex;
        justify-content: center;
      }
      .divname {
        width: 1700px;
        height: 36px;
        /*background: #cccccc;*/
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .table {
        width: 800px;
        td{
          height: 3em;
        }
        tr{
          width: 100%;
        }
      }
      .biaoti {
        padding-left: 10px;
      }
      .tdxuanxiang {
        /*width: 12.5%;*/
        text-align: center;
      }
      .tableBody {
        display: -webkit-box;
      }
      .tablestyle {
        border: 1px solid #cccccc;
        color: #606266;
        font-size: 13px;
        width: 50em;
        th{
          height: 3em;
        }

      }
      .tablestyle td {
        height: 50px;
        text-align: center;
      }
      .beicename {
        height: 50px;
        /*background-color: red;*/
      }
    }
  }

</style>
